<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>酷狗音乐问答互动</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<link rel="stylesheet" type="text/css" href="css/template.css" />
		<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1039952_pl78pvlo1sm.css"/>
	</head>

	<body>
		<div class="web">
			<!--预加载-->
			<div class="reload">
				<div class="con">
					<div class="percent-circle percent-circle-left">
						<div class="left-content"></div>
					</div>
					<div class="percent-circle percent-circle-right">
						<div class="right-content"></div>
					</div>
					<div class="text-circle">0%</div>
				</div>
			</div>
			<audio src="media/Sugar.mp3" id="bgmusic" controls="controls" loop="true" hidden="true"></audio>
			<!--首页-->
			<div class="index animated">
				<div class="content">
					<img src="img/indexbg.jpg"/>
					<div class="index-logo">
						<img src="img/logo_03.png"/>
					</div>
					<div class="title">
						<img src="img/title1_03.png"/>
						<img src="img/title2_03.png" class="title-move"/>
						<img src="img/title3_03.png"/>
						<img src="img/title4_03.png"/>
					</div>
					<div class="bubble bubble-left1 tada">
						<img src="img/bubble_03.png"/>
					</div>
					<div class="bubble bubble-left2 tada">
						<img src="img/bubble3_03.png"/>
					</div>
					<div class="bubble bubble-right1 tada">
						<img src="img/bubble1_03_03.png"/>
					</div>
					<div class="bubble bubble-right2 tada">
						<img src="img/bubble4_03.png"/>
					</div>
					<div class="start-button">
						<img src="img/startbtn_03.png"/>
					</div>
				</div>
			</div>
			<!--页面一-->
			<div class="page" data-page="0">
				<div class="content">
					<img src="img/bg.jpg" />
					<div class="musicLogo musicRotate">
						<i class="iconfont icon-yinle"></i>
					</div>
					<div class="cloudMove animated-3s animated-cloud animated-delay-1s">
						<img src="img/cloud1.png" />
						<img src="img/cloud2.png" />
						<img src="img/cloud3.png" />
						<img src="img/cloud4.png" />
						<img src="img/cloud5.png" />
					</div>
					<div class="question">
						<p>1.请问图中位于中间的男孩姓名是?</p>
						<div class="questionImg">
							<img src="img/questionimg1.jpg" />
						</div>
					</div>
					<div class="answers">
						<div class="answerItem bounceInUp animated-delay-1s" data-answernum = "0">
							<p>A 王俊凯</p>
							<div class="answerSign">
								<img src="img/rightsign.png" />
							</div>
							<div class="answerSign">
								<img src="img/arror.png" />
							</div>
						</div>
						<div class="answerItem bounceInUp animated-delay-15s" data-answernum = "1">
							<p>B 易烊千玺</p>
							<div class="answerSign">
								<img src="img/rightsign.png" />
							</div>
							<div class="answerSign">
								<img src="img/arror.png" />
							</div>
						</div>
						<div class="answerItem bounceInUp animated-delay-2s" data-answernum = "2">
							<p>C 王源</p>
							<div class="answerSign">
								<img src="img/rightsign.png" />
							</div>
							<div class="answerSign">
								<img src="img/arror.png" />
							</div>
						</div>
						<div class="answerItem bounceInUp animated-delay-25s" data-answernum = "3">
							<p>D 王凯</p>
							<div class="answerSign">
								<img src="img/rightsign.png" />
							</div>
							<div class="answerSign">
								<img src="img/arror.png" />
							</div>
						</div>
					</div>
					<div class="musicImg">
						<img src="img/music_03.png" />
					</div>
					<div class="kugouDog kugouMove">
						<img src="img/kugou1.png" />
					</div>
				</div>

			</div>
			<!--页面二-->
			<div class="page" data-page = "1">
				<div class="content">
					<img src="img/bg.jpg" />
					<div class="musicLogo musicRotate">
						<i class="iconfont icon-yinle"></i>
					</div>
					<div class="cloudMove animated-3s animated-cloud animated-delay-1s">
						<img src="img/cloud1.png" />
						<img src="img/cloud2.png" />
						<img src="img/cloud3.png" />
						<img src="img/cloud4.png" />
						<img src="img/cloud5.png" />
					</div>
					<div class="question">
						<p>1.请问图中位于中间的男孩姓名是?</p>
						<div class="questionImg">
							<img src="img/questionimg1.jpg" />
						</div>
					</div>
					<div class="answers">
						<div class="answerItem bounceInUp animated-delay-1s" data-answernum = "0">
							<p>A 王俊凯</p>
							<div class="answerSign">
								<img src="img/rightsign.png" />
							</div>
							<div class="answerSign">
								<img src="img/arror.png" />
							</div>
						</div>
						<div class="answerItem bounceInUp animated-delay-15s" data-answernum = "1">
							<p>B 易烊千玺</p>
							<div class="answerSign">
								<img src="img/rightsign.png" />
							</div>
							<div class="answerSign">
								<img src="img/arror.png" />
							</div>
						</div>
						<div class="answerItem bounceInUp animated-delay-2s" data-answernum = "2">
							<p>C 王源</p>
							<div class="answerSign">
								<img src="img/rightsign.png" />
							</div>
							<div class="answerSign">
								<img src="img/arror.png" />
							</div>
						</div>
						<div class="answerItem bounceInUp animated-delay-25s" data-answernum = "3">
							<p>D 王凯</p>
							<div class="answerSign">
								<img src="img/rightsign.png" />
							</div>
							<div class="answerSign">
								<img src="img/arror.png" />
							</div>
						</div>
					</div>
					<div class="musicImg">
						<img src="img/music_03.png" />
					</div>
					<div class="kugouDog kugouMove">
						<img src="img/kugou1.png" />
					</div>
				</div>
			</div>
			<!--测试结果页-->
			<div class="result animated zoomIn">
				<div class="content result-content">
					<img src="img/testbg.jpg"/>
					<div class="logo">
						<img src="img/logo_03.png"/>
					</div>
					<div class="musicLogo musicRotate">
						<i class="iconfont icon-yinle"></i>
					</div>
					<div class="testbox">
						<div class="test-title animated animated-delay-15s bounceInUp">
							<img src="img/test_03.png"/>
						</div>
						<div class="test-content animated animated-delay-2s bounceInUp">
							<p>你是一个有个性的潮人任世界如何变幻<br />你只<span>坚持内心的选择</span>这就是你。</p>
						</div>
						<div class="share-btn">
							<img src="img/sharebtn_07.png"/>
						</div>
					</div>
					<div class="people animated animated-delay-15s fadeInLeft">
						<img src="img/people_03.png"/>
					</div>
				</div>
				
			</div>
			<div class="share-page">
				<div class="share-guide">
					<img src="img/kugou8.png"/>
					<p>点击右上角与好友一比高下</p>
				</div>
				
			</div>
		</div>
		<script type="text/javascript" src="js/preloadjs.min.js"></script>
		<script type="text/javascript" src="js/common.js"></script>
	</body>

</html>